<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<html>
	<head>
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="js/jquery.urlshortener.js" type="text/javascript"></script>
<style>
.info
{
	display:inline;
}
</style>

<title>JQuery URL Shortener Demo</title>
</head>
<body>
	<h1>jQuery URL Shortener Demo</h1>
	
Long URL : <input type='text' id='longUrl' value='http://llun.com/v.html' /> <input type="button" id="shortIt" value="Short It" /> <div class="info" id="shortUrlInfo"></div> <br/><br/>

Short URL : <input type='text' id='shortUrl' value='http://goo.gl/eDcZI' /> <input type="button" id="longIt" value="Get Long URL" /> <div class="info"  id="longUrlInfo"></div>
<br/> </br>

Short URL Info: <input type='text' id='shortUrl1' value='http://goo.gl/eDcZI' />
<select id="projection">
	<option name="FULL">Full</option>
	<option name="ANALYTICS_CLICKS">ANALYTICS_CLICKS</option>
	<option name="ANALYTICS_TOP_STRINGS">ANALYTICS_TOP_STRINGS</option>
</select>
<input type="button" id="getUrlInfo" value="Get URL Info" />	<br/><br/>
<div  id="fullUrlInfo"></div>

<script type="text/javascript">

jQuery.urlShortener.settings.apiKey = 'AIzaSyAGyIXtncjNPEgW7JFLjHkVEho0y5piD6U';
$("#shortIt").click(function () {
    $("#shortUrlInfo").html("<img src='img/loading.gif'/>");
    var longUrlLink = $("#longUrl").val();
    jQuery.urlShortener({
        longUrl: longUrlLink,
        success: function (shortUrl) {
            $("#shortUrlInfo").html(shortUrl);
        },
        error: function(err)
        {
        	$("#shortUrlInfo").html(JSON.stringify(err));
        }
    });

});

$("#longIt").click(function () {
    $("#longUrlInfo").html("<img src='img/loading.gif'/>");
    var shortUrlLink = $("#shortUrl").val();
    jQuery.urlShortener({
        shortUrl: shortUrlLink,
        success: function (longUrl) {
            $("#longUrlInfo").html(longUrl);
        },
        error: function(err)
        {
        	$("#longUrlInfo").html(JSON.stringify(err));
        }
        
    });

});
$("#getUrlInfo").click(function () {
    $("#fullUrlInfo").html("<img src='img/loading.gif'/>");
    var shortUrlLink = $("#shortUrl1").val();
    var projectionType = $("#projection :selected").val();
    jQuery.urlShortener({
        shortUrl: shortUrlLink,
        projection: projectionType,
        success: function (urlInfo) {
            $("#fullUrlInfo").html(JSON.stringify(urlInfo));
        },
        error: function(err)
        {
        	$("#fullUrlInfo").html(JSON.stringify(err));
        }
    });

});
		</script>
	</body>
</html>
